<template>
  <div class="card">
    <div style="margin-bottom: 20px">
      <a-input class="inputStyle" v-model="form.search.phone" placeholder="用户手机号"></a-input>
      <a-input class="inputStyle" v-model="form.search.realname" placeholder="用户姓名"></a-input>
      <a-select v-model="form.search.status" class="inputStyle" default-value="1" :allowClear="true">
        <a-select-option v-for="item in TypeOption" :key="item.id" :value="item.id"> {{ item.name }} </a-select-option>
      </a-select>
      <a-button class="btnStyle" type="primary" @click="getPosList">查询</a-button>
      <a-button class="btnStyle" @click="reset">重置</a-button>
      <a-button class="btnStyle" icon="plus" type="primary" @click="add()">新建</a-button>
    </div>
    <a-table
      :row-selection="rowSelection"
      :pagination="false"
      :rowKey="(record, index) => index"
      :loading="loading"
      style="border: 1px solid #e8e8e8"
      :columns="columns"
      :data-source="data"
    >
      <div slot="status" slot-scope="text, record">
        <span
          :style="`border: 1px solid ${
            record.status == '1' ? '#bded9f' : '#91d5ff'
          }; padding: 0 5px; font-size: 14px; color: ${
            record.status == '1' ? '#56c621' : '#1890ff'
          }; background-color: ${record.status == '1' ? '#f6ffed' : '#e6f7ff'}`"
        >
          {{ record.status == '1' ? '正常' : '删除' }}
        </span>
      </div>
      <div slot="operate" slot-scope="text, record">
        <span class="linkStyle" @click="edit(record)">编辑</span>
        <span class="lineStyle">丨</span>
        <span class="linkStyle" @click="del(record.id)">删除</span>
      </div>
    </a-table>
    <div class="paging">
      <a-pagination
        @change="changepage"
        @showSizeChange="showSizeChange"
        size="small"
        :total="total"
        :page-size="form.page_size"
        :pageSizeOptions="['10', '20', '30', '40', '50']"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        show-quick-jumper
      />
    </div>
    <AddPos :isShowAdd.sync="isShowAdd" :object.sync="object" />
  </div>
</template>

<script>
import AddPos from './dialog/AddPos.vue'
import { getPosListAPI } from '@/api/userinfo.js'
export default {
  name: 'DepositCard',
  components: {
    AddPos
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      object: {},
      isShowAdd: false,
      loading: false,
      total: null,
      TypeOption: [
        { id: '1', name: '正常' },
        { id: '-10', name: '删除' }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      form: {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          phone: '',
          realname: '',
          status: '1'
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '会员手机',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '银行卡号',
          dataIndex: 'bank_num',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center'
        },
        {
          title: '预留手机号',
          dataIndex: 'bank_input_phone',
          align: 'center'
        },
        {
          title: '真实姓名',
          dataIndex: 'bank_input_name',
          align: 'center'
        },
        {
          title: '证件号码',
          dataIndex: 'id_card',
          align: 'center'
        },
        {
          title: '添加时间',
          dataIndex: 'utime',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      data: []
    }
  },
  created() {
    this.getPosList()
  },
  methods: {
    changepage(value) {
      this.form.page = value
      this.getPosList()
    },
    showSizeChange(value, val) {
      this.form.page_size = val
      this.getPosList()
    },
    reset() {
      this.form = {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          phone: '',
          realname: '',
          status: '1'
        }
      }
      this.getPosList()
    },
    async getPosList() {
      try {
        this.loading = true
        const { data } = await getPosListAPI(this.form)
        this.data = data.list
        this.total = data.total
      } finally {
        this.loading = false
      }
    },
    add() {
      this.isShowAdd = true
    },
    edit(object) {
      this.object = object
      this.isShowAdd = true
    },
    del(id) {
      console.log(1)
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  width: 180px;
  margin-right: 10px;
}
.btnStyle {
  margin-right: 10px;
}

/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 15px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
</style>
